<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block data-th-replace="/adminlte/base::base-head"></th:block>
    <link rel="stylesheet" href="/plugins/ekko-lightbox/ekko-lightbox.css">
    <link rel="stylesheet" href="/plugins/datatables-bs4/css/dataTables.bootstrap4.css">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <th:block data-th-replace="/adminlte/base::base-navbar"></th:block>
    <th:block data-th-replace="/adminlte/base::base-main-sidebar"></th:block>
    <div class="content-wrapper">
        <th:block data-th-replace="/adminlte/base::base-content-header"></th:block>
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="row mt-2">
                                    <button class="btn btn-app" onclick="onClick('#image')">
                                        <i class="fas fa-upload text-blue"></i> 上传文件
                                    </button>
                                    <button class="btn btn-app" 
                                        data-dialog-confirm="/files/maps/self:delete" 
                                        data-handle="data.ids"
                                        data-dialog-t-msg="确定要删除所选文件吗？"
                                        data-check-ids="table tbody input">
                                        <i class="fas fa-trash text-blue"></i> 删除文件
                                    </button>
                                    
                                    <div class="w-100"></div>
                                    <input data-par-tag="vditor" id="image" type="file" style="display: none;" 
                                    accept="image/*,video/*,text/*,.mkv,.zip,.rar" data-progress="#progress" onchange="upload2ByThis(this)" />
                                    <div class="progress w-100 ml-2 mr-2 mb-2">
                                      <div id="progress" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" style="min-width:2em;">
                                        0%
                                      </div>
                                    </div>

                                    <div class="w-100"></div>
                                    <div class="input-group mx-2 mb-2">
                                        <div class="input-group-prepend">
                                            <button type="submit" class="btn btn-default"
                                                    data-get-uuid="#search-file-mark" onclick="changeThis(this)">
                                                <i class="fas fa-search"></i>
                                            </button>
                                        </div>
                                        <input id="search-file-mark" type="text" name="table_search"
                                               class="form-control" placeholder="Search" data-get-search="#search-file-mark"
                                               onkeyup="enterThis(this, changeThis)">
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table id="file-table" class="table table-bordered table-hover table-striped">
                                        <colgroup>
                                            <col width="50"/>
                                            <col width="200"/>
                                            <col/>
                                            <col width="160"/>
                                            <col width="80"/>
                                            <col width="100"/>
                                            <col width="200"/>
                                            <col width="160"/>
                                        </colgroup>
                                        <thead>
                                        <tr>
                                            <th>
                                                <input type="checkbox" name="id"/>
                                            </th>
                                            <th>UUID</th>
                                            <th>文件名字</th>
                                            <th>文件类型</th>
                                            <th>后缀</th>
                                            <th>文件大小</th>
                                            <th>创建时间</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr data-th-each="fileMap : ${mapPage.data}" th:with="fileServerHost=${fileClientUtils.getHost(fileMap.serverId)}">
                                            <td>
                                                <input type="checkbox" name="ids" th:value="${fileMap.id}"/>
                                            </td>
                                            <td th:href="${fileServerHost+'/encrypts/files/'+fileMap.uuid}" 
                                                data-toggle="lightbox" data-gallery="gallery" 
                                                th:data-is-image="${StringUtils.startWith(fileMap.type, 'image')}"
                                                th:data-title="${fileMap.uuid}" class="text-blue" data-th-utext="${fileMap.uuid}"
                                                style="cursor: pointer;">
                                            </td>
                                            <td data-th-utext="${fileMap.name}"></td>
                                            <td>
                                                <a th:href="${'/admin/file/self?type='+fileMap.type}"
                                                   th:utext="${fileMap.type}"></a>
                                            </td>
                                            <td data-th-utext="${fileMap.suffix}"></td>
                                            <td data-th-utext="${fileMap.size}"></td>
                                            <td data-th-utext="${LocalDateTimeUtils.format(fileMap.createTime)}"></td>
                                            <td>
                                            	<a title="预览" target="_blank"
													th:href="${'/admin/file/view/' + fileMap.uuid}">
													<i class="fas fa-eye text-blue"
														style="margin-left: 10px;"></i>
												</a>
												<a title="下载" target="_blank"
													th:download="${fileMap.uuid+fileMap.suffix}"
													th:href="${fileServerHost+'/encrypts/files/'+fileMap.uuid+fileMap.suffix}">
													<i class="fas fa-download text-blue"
														style="margin-left: 10px;"></i>
												</a>
                                                <a title="复制" th:data-copy="${fileServerHost+'/encrypts/files/'+fileMap.uuid+fileMap.suffix}" 
                                                    href="#" onclick="copyText(this)">
                                                    <i class="fas fa-copy text-blue" style="margin-left: 10px;"></i>
                                                </a>
                                                <a title="删除"
                                                   data-dialog-confirm="/files/maps/self/:delete" th:data-path="${fileMap.id}"
                                                   data-dialog-t-msg="您确定要删除当前文件映射吗？">
                                                    <i class="fas fa-trash text-blue" style="margin-left: 10px;"></i>
                                                </a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <th:block
                                        data-th-replace="/adminlte/base::pageNav(${mapPage},'个文件映射')"></th:block>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <th:block data-th-replace="/adminlte/base::base-footer"></th:block>
    <th:block data-th-replace="/adminlte/base::base-control-sidebar"></th:block>
</div>

<script src="/kaibes/js/extend.js"></script>
<script src="/kaibes/js/table-check.js"></script>
<script src="/plugins/ekko-lightbox/ekko-lightbox.js"></script>
<script src="/plugins/spark-md5/spark-md5.min.js"></script>
<script src="/file-client/js/upload-file.js"></script>

<script type="text/javascript">
    $(function () {
        showBox('[data-toggle="lightbox"]');
        //showImage('[data-toggle="lightbox"]');
    })
</script>
</body>
</html>